<template>
	<div>
		<p>自定义事件</p>
		<p>{{ msg }}</p>
		<Son :value.sync="msg" />
		<!-- <Son :value="msg" @update:value="(date) => (msg = date)" /> -->
		<!-- 解刨：:value.sync="msg"==>>
			:value='msg'
			@updata:value='date=>msg=date'
		 -->
		<button @click="msgAdd">父组件msg++</button>
		<button @click="sentAllEvent">发布全局事件总线，事件数据</button>
	</div>
</template>
<script>
import Son from "./Son.vue";
export default {
	name: "",
	components: { Son },
	data() {
		return { msg: 1 };
	},
	mounted() {
		//实例方法
		this.$on("test", function (msg) {
			console.log(msg);
		});
		this.$emit("test", "hi");
		this.$once("testOnce", function (msg) {
			console.log(msg);
		});
		// 只能触发一次
		this.$emit("testOnce", "hiTestOnce");
		this.$emit("testOnce", "hiTestOnce"); //无效

		this.$off(["test"]);
		this.$emit("test", "hi"); //关闭后无法再次触发

		this.$bus.$emit("sentMsgF", "我是父组件传递的数据");
		this.$bus.$on("sentMsgZ", (data) => {
			console.log("sentMsgZ", data);
		});
	},
	methods: {
		msgAdd() {
			this.msg++;
		},
		// 父组件发布
		sentAllEvent() {
			this.$bus.$emit("sentMsgF", "我是子组件传递的数据");
		},
	},
};
</script>
<style lang="" scoped></style>
